<template>
	<view>
		<view v-if="!marryDateShow" class="date-text">{{ year }}年{{ month }}月{{ day }}日</view>
		<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
			@pickend="pickend" class="picker-view" indicator-class="indicator-class" :mask-style="fsdfds">
			<picker-view-column v-if="!marryDateShow">
				<view class="item" style="text-align: right;" v-for="(item, index) in years" :key="index"
					:class="year == item ? 'lldl' : ''">{{ item }}</view>
			</picker-view-column>
			<picker-view-column v-if="marryDateShow">
				<view class="item" style="text-align: center;" v-for="(item, index) in years" :key="index"
					:class="year == item ? 'lldl' : ''">{{ item }}</view>
			</picker-view-column>
			<picker-view-column v-if="!marryDateShow">
				<view class="item" v-for="(item, index) in months" :key="index" :class="month == item ? 'lldl' : ''">
					{{ item }}
				</view>
			</picker-view-column>
			<picker-view-column v-if="!marryDateShow">
				<view class="item" style="text-align: left;" v-for="(item, index) in days" :key="index"
					:class="day == item ? 'lldl' : ''">{{ item }}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	var _self;
	export default {
		props: {
			dateString: {
				type: String,
				default: '1970'
			},
			marryDateShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				title: 'picker-view',
				years: [],
				year: '1970',
				months: [],
				month: '1',
				days: [],
				day: '1',
				value: 1,
				visible: true,
				indicatorStyle: `height: 45px;color: rgba(51, 51, 51, 0.2);background:rgba(238, 245, 254, 0.5);`,
				fsdfds: `opacity: 0.5;background: rgba(238, 245, 254, 0);`
			}
		},
		mounted() {
			_self = this;
			console.log('_self.dateString = ', _self.dateString);
			_self.value = [9999, _self.month - 1, _self.day - 1];
			if (_self.marryDateShow) {
				for (let i = parseInt(_self.dateString); i <= (new Date().getFullYear() + 10); i++) {
					_self.years.push(i);
				}
			} else {
				for (let i = parseInt(_self.dateString); i <= new Date().getFullYear(); i++) {
					_self.years.push(i);
				}
			}
			for (let i = 1; i <= 12; i++) {
				_self.months.push(i);
			}
			for (let i = 1; i <= 31; i++) {
				_self.days.push(i);
			}
		},
		methods: {
			pickend(e) {
				console.log('pickend', e);
			},
			bindChange: function(e) {
				console.log('bindChange', e);
				const val = e.detail.value;
				_self.year = _self.years[val[0]];
				_self.month = _self.months[val[1]];
				_self.day = _self.days[val[2]];
				if (_self.marryDateShow) {
					var curTime = _self.year;
					_self.$emit('curTime', curTime);
				} else {
					var curTime = _self.year + '-' + _self.month + '-' + _self.day + ' ' + '00' + ':' + '00' + ':' +
						'00';
					_self.$emit('curTime', curTime);
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	.date-text {
		text-align: center;
		font-size: 36rpx;
		// font-family: 'PingFang SC-Bold, PingFang SC';

		color: rgba(67, 67, 67, 0.9);
		margin-bottom: 40rpx;

		font-weight: 400;
	}

	.picker-view {
		width: 750rpx;
		height: 300rpx;
		margin-top: 20rpx;
		background: rgba(238, 245, 254, 0);
	}

	.item {
		height: 90rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		// font-family:'PingFang SC-Regular, PingFang SC';

		font-weight: 400;
		color: #B8B8B8;

	}

	.lldl {
		font-weight: bold;
		color: #434343;
	}
</style>